<ion-view style="background: #383644;">
  <ion-nav-title>
    <span>载入路径</span>
  </ion-nav-title>
  <style>
  </style>
  <ion-content padding="false">
    <style>
      .tab_col_active {
        background-color: #FFAF17;
      }
    </style>

    <div class="row"
         style="text-align: center; padding-left: 10%; padding-right: 10%;
          background-color: #000000; color: white; padding-top: 0; padding-bottom: 0;">
      <div class="col" ng-click="select_tab(1)" ng-class="{tab_col_active:selected(1)}">我的收藏</div>
      <div class="col" ng-click="select_tab(2)" ng-class="{tab_col_active:selected(2)}">推荐路径</div>
    </div>

    <!-- load self routes -->
    <ion-list ng-show="selected(1)">
      <div class="item-dark card route-list" ui-sref="app.draft_detail" style="border-radius: 10px;" ng-repeat="route in selfRoutes">
        <div class="item item-avatar item-balanced" style="border-width: 0px; border-color: #FFAF17;">
          <img src="{{route.who.headImage}}">
          <h2>{{route.title}}</h2>
          <p><span>{{route.who.name}}  </span><span>{{route.when}}</span></p>
        </div>
        <div class="item item-body" style="padding: 0; border-width: 0;">
          <img class="full-image" src="img/delorean.jpg">
        </div>
      </div>
    </ion-list>

    <!-- load recommendation routes -->
    <ion-list ng-show="selected(2)">
      <div class="item-dark card route-list" ui-sref="app.draft_detail" style="border-radius: 10px;" ng-repeat="route in recommendationRoutes">
        <div class="item item-avatar item-balanced" style="border-width: 0px; border-color: #FFAF17;">
          <img src="{{route.who.headImage}}">
          <h2>{{route.title}}</h2>
          <p><span>{{route.who.name}}  </span><span>{{route.when}}</span></p>
        </div>
        <div class="item item-body" style="padding: 0; border-width: 0;">
          <img class="full-image" src="img/delorean.jpg">
        </div>
      </div>
    </ion-list>

  </ion-content>
</ion-view>
